<template>
  <!-- 列表模块 -->
  <div>
    <div style="padding: 20px">
      <!-- 表单 -->
      <a-form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="formState"
      >
        <!--  :rules="[{ required: true, message: '请输入表单名称' }]"-->
        <a-row :gutter="24">
          <a-col :span="7">
            <a-form-item name="formName" label="审批标题">
              <a-input
                v-model:value="formState.formName"
                placeholder="请输入表单名称"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item name="formStatus" label="审批状态">
              <a-select
                v-model:value="formState.formStatus"
                :options="options1"
                placeholder="请输入表单状态"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item name="opePerson" label="申请人">
              <a-input
                v-model:value="formState.opePerson"
                placeholder="请输入操作人"
              ></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="3">
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button
              style="margin: 0 8px"
              @click="() => formRef.resetFields()"
            >
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
      <!-- tabs标签项 -->
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane
          v-for="tabItem in tabList"
          :key="tabItem"
          :tab="tabItem"
          tab="tabItem"
        >
          <!-- 表格 -->
          <MyTable
            ref="myTable"
            :data="handleTableData"
            :columns="columns"
            :attachButtons="attachButtons"
          >
            <template #column-tags="{ record }">
              <a-tag v-for="tag in record.tags" :key="tag">
                {{ tag.toUpperCase() }}
              </a-tag>
            </template>
            <template #headerCell="{ column }">
              <template v-if="column.dataIndex === 'tags'">
                测试表头(列插槽)
              </template>
            </template>
          </MyTable>
        </a-tab-pane>
        <!-- 右侧切换按钮 -->
        <template #rightExtra>
          <a-button v-if="myApprove" type="primary" @click="toBeSubmit">
            我提交的
          </a-button>
          <a-button v-else type="primary" @click="toBeApprove">
            我审批的
          </a-button>
        </template>
      </a-tabs>
    </div>
    <!-- 新增/编辑弹框  -->
    <addEdit
      @handleOk="handleOk"
      @handleCancel="handleCancel"
      :testContent2="testContent2"
      :title="testContent2.title"
      :isShowModal="testIsShowModal"
    ></addEdit>
  </div>
</template>

<script setup>
  import MyTable from '../../../../components/table.vue'
  import { reactive, ref, watch } from 'vue'
  // import { useRouter } from 'vue-router'
  import { getRemoteTableData } from '../../../../components/utils'
  import addEdit from './components/addEdit.vue'
  // let router = useRouter()
  const currentRow = ref({})
  let myApprove = ref(true)

  ///定义表单
  const formRef = ref()
  const formState = reactive({
    formName: '',
    formStatus: '',
    opePerson: '',
  })
  const options1 = ref([
    {
      value: 'lucy',
      label: 'Lucy',
    },
  ])
  //tabs列表
  const tabList = ref(['全部审批', '待我处理', '我已处理', '抄送我的'])
  const activeKey = ref('全部审批')
  //定义功能按钮
  const attachButtons = ref([
    {
      name: '批量删除',
      onclick: ({ selectedRowKeys }) => {
        console.log('批量删除', selectedRowKeys)
        
      },
      show: true,
      isDisabled: (selectedRowKeys) => !selectedRowKeys.length,

      props: {
        type: 'primary',
        danger: true,
      },
    },
    {
      name: '批量审批',
      onclick: () => {
        console.log('批量审批')
      },
      show: () => {
        return (
          activeKey.value === '全部审批' ||
          activeKey.value === '待我处理' ||
          activeKey.value === '全部' ||
          activeKey.value === '待处理'
        )
      },
      isDisabled: false,

      props: {
        type: 'primary',
      },
    },
  ])
  //定义表格
  const myTable = ref(null)
  const columns = [
    {
      title: '序号',
      dataIndex: 'xuhao',
      key: 'serial',
    },
    {
      title: '审批单号',
      dataIndex: 'formName',
      key: 'formName',
    },
    {
      title: '审批标题',
      dataIndex: 'formDesc',
      key: 'formDesc',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '提交时间',
      dataIndex: 'lastTime',
      key: 'lastTime',
    },
    {
      title: '发起人',
      dataIndex: 'opePerson',
      key: 'opePerson',
    },
    {
      title: '审批时间',
      dataIndex: 'lastTime',
      key: 'lastTime',
    },
    {
      title: '审批人',
      dataIndex: 'opePerson',
      key: 'opePerson',
    },
    // {
    //   title: "自定义渲染列",
    //   dataIndex: "custom",
    //   customRender: ({record}) => <div><a>{record.name} </a><span style="color: green">年龄：{record.age}</span></div>
    // },
    {
      title: '操作',
      dataIndex: 'operation',
      buttons: [
        {
          name: '审批',
          onclick: ({ record }) => {
            //打开审批弹框
            handleAddEdit('审批', record)
          },
          show: ({ record }) => {
            return (
              (activeKey.value === '全部审批' ||
              activeKey.value === '待我处理') &&(record.status==='待处理')
            )
          },
          isDisabled: false,
        },
        {
          name: '撤回',
          onclick: ({ record }) => {},
          show: ({ record }) => {
            return (
              activeKey.value === '待处理'  &&record.status==='待处理'
            )
          },
          isDisabled: false,
        },
        {
          name: '重新申请',
          onclick: ({ record }) => {},
          show: ({ record }) => {
            return (
              activeKey.value === '已处理'  &&record.status==='已拒绝'
            )
          },
          isDisabled: false,
        },
        {
          name: '重新提交',
          onclick: ({ record }) => {},
          show: ({ record }) => {
            return (
              activeKey.value === '已撤回'  &&record.status==='已撤回'
            )
          },
          isDisabled: false,
        },
        {
          name: '查看详情',
          onclick: ({ record }) => {
            //打开编辑弹框
            handleAddEdit('查看详情', record)
            console.log('查看详情', record)
          },
          show:true,
          isDisabled: false,
        },
        {
          name: '删除',
          onclick: ({ record }) => {
            handleDelete('删除', record)
          },
          show:true,
          isDisabled: false,
          // style: {
          //   color: 'red',
          // },
        },
      ],
      width: 340,
    },
  ]
  //定义弹框
  const testContent2 = ref({
    isShowModal: false,
    title: '',
    contentList: [],
  })
  const testIsShowModal = ref(false)
  //新增/编辑/复制 弹框
  const handleAddEdit = (flag, row) => {
    testContent2.value.contentList = [
      {
        id: 1,
        type: 'form',
        isCheck: false,
        rules: {
          formName: [
            { required: true, message: '请输入应用名称', trigger: 'blur' },
          ],
        },
        bindData: {
          formName: row ? row.formName : '', //初始值
          formDesc: row ? row.formDesc : '', //初始值
        },
        contentItemList: [
          // {
          //   type: 'select',
          //   key: 'formName',
          //   label: '应用名称',
          //   options: [
          //     {
          //       label: '待申请',
          //       value: '待申请'
          //     },
          //     {
          //       label: '已申请',
          //       value: '已申请'
          //     },
          //     {
          //       label: '已编码',
          //       value: '已编码'
          //     },
          //   ]
          // }
          {
            type: 'input',
            key: 'formName',
            label: '应用名称',
          },
          {
            type: 'textarea',
            key: 'formDesc',
            label: '应用描述',
          },
        ],
      },
    ]
    testContent2.value.isShowModal = true
    testContent2.value.title = flag
  }
  //发布弹框
  const handlePublish = (flag, row) => {
    testContent2.value.title = flag
    testContent2.value.contentList = [
      {
        id: 2,
        type: 'publish',
        text: '确认要发布该表单？发布后将在采集表单列表中展示',
      },
    ]
    testContent2.value.isShowModal = true
  }
  //删除弹框
  const handleDelete = (flag, row) => {
    testContent2.value.title = flag
    testContent2.value.contentList = [
      {
        id: 3,
        type: 'delete',
        text: '删除后数据不能恢复，是否确认删除？',
      },
    ]
    testContent2.value.isShowModal = true
  }
  // 点击确定后
  const handleOk = () => {
    testContent2.value.isShowModal = false
  }

  // 点击取消后
  const handleCancel = () => {
    testContent2.value.isShowModal = false
  }
  //获取表格
  const handleTableData = async () => {
    let getData = [
      {
        id: 1,
        key: '1',
        formName: 'A12345601',
        formDesc: 'XXX的XXX信息填报',
        status: '已通过',
        lastTime: '2023-09-06 18:06:06',
        opePerson: 'yzk',
      },
      {
        id: 2,
        key: '2',
        formName: 'A12345601',
        formDesc: '这是一段应用描述',
        status: ' 已拒绝',
        lastTime: '2024-04-06 18:06:09',
        opePerson: 'zjf',
      },
      {
        id: 3,
        key: '3',
        formName: 'A12345601',
        formDesc: '这是一段应用描述',
        status: ' 待处理',
        lastTime: '2024-04-06 18:06:09',
        opePerson: 'zjf',
      },
      {
        id: 4,
        key: '4',
        formName: 'A12345601',
        formDesc: '这是一段应用描述',
        status: ' 已撤回',
        lastTime: '2024-04-06 18:06:09',
        opePerson: 'zjf',
      },
    ]
    //调接口
    return await getRemoteTableData([...getData])
  }

  //右侧切换按钮
  const toBeSubmit = () => {
    myApprove.value = false
    tabList.value = ['全部', '待处理', '已处理', '已撤回']
    activeKey.value = '全部'
  }
  const toBeApprove = () => {
    myApprove.value = true
    tabList.value = ['全部审批', '待我处理', '我已处理', '抄送我的']
    activeKey.value = '全部审批'
  }
</script>
<style scoped>
  .titleRow {
    display: flex;
    justify-content: space-between;
  }

  .flex-left {
  }

  .flex-right {
  }
</style>
